﻿<template>
  <div>
     <DStandardTable
    :tableConfig="tableConfig"
    :dispatchKey="dispatchKey"
    :dataSource="dataSourceCmp"
    :searchFields="searchFields"
    :span="span"
    :selectedRowKeys="state.selectedRows"
    :rowKey="rowKey"
    :total="totalCmp"
    selectedRowKeyType="checkbox"
    :onSelectChange="onSelectRowChange"
    @onTableRefresh="onTableRefresh($event)"
  >
    <template #toolbar>
      <a-button type="primary" shape="round" @click="onAddData()"
        >新增</a-button
      >
    </template>
      {% for field in ModelFields %}{% if  field.DbColumnName contains 'Image' or field.DbColumnName contains 'image' or field.DbColumnName contains 'thumbnail'  or field.DbColumnName contains 'Thumbnail' %}
           <template #{{field.DbColumnName}}="{ record }">
              <Image :src="record.{{field.DbColumnName}}" :width="40" :height="40"></Image>
           </template>{% endif %}{% endfor %}
    <template #action="{ record }">
      <a-space>
        <a-button size="small" shape="round" @click="onViewDataDetail(record)"
          >查看</a-button
        >
        <a-button
          size="small"
          shape="round"
          type="primary"
          @click="onEdit(record)"
          >编辑</a-button
        >
        <a-button size="small" shape="round" danger @click="onDelete(record)"
          >删除</a-button
        >
      </a-space>
    </template>
  </DStandardTable>

  <CoreShopFormModal
    :visible="state.editModalVisible"   
    width="50%"
    :schema="state.formSchema"
    :modalVisible="onEditModalVisible"
    :onSuccess="onEditSuccess"
    :title="state.formModalTitle"
  ></CoreShopFormModal>

  <Modal
    :visible="state.dataDetailVisible"
    :onClose="onCloseDataDetailModal"
    :onCancel="onCloseDataDetailModal"
    :destroyOnClose="true"
    :title="state.dataDetailConfig?.title"
    :width="45"
    height="auto"
  >
    <DataDetailDisplay
      :data="state.dataDetailConfig.fields"
      :column="2"
    ></DataDetailDisplay>
  </Modal>

  <DeleteConfirmModal
    :visible="state.deleteConfirmModalVisible"
    :destroyOnClose="true"
    :content="state.deleteContentTip"
    :onCancel="onCancelDeleteDataModal"
    :onSuccess="onSuccessDeleteData"
    :DeleteUrl="state.deleteDataUrl"
    :params="state.deleteDataparams"
  >
  </DeleteConfirmModal>
  </div>
</template>
<script setup lang="ts">
import DStandardTable from "@/components/table/dStandardTable.vue";
import type { I{{ModelClassName}} } from "@/models/{{ModelClassName}}";
import { computed, reactive } from "vue";
import { useStore } from "vuex";
import tableConfig from "./table-config";
import formSchema from "./form-schema";
import { CoreShopFormModal } from "@/components/coreshop-form";
import searchFields from "./search-field";
import { cloneDeep } from "lodash";
import type { IFormSchema } from "@/components/coreshop-form/type";
import dataDetailConfig from "./detail-config";
import { DataDetailDisplay } from "@/components/data-detail-display";
import type {  IData } from "@/components/data-detail-display";
import { buildDataDetail } from "@/utils/build-data-detail";
import Modal from "@/components/modal";
import DeleteConfirmModal from "@/components/coreshop-modal-delete/index";
import Image from "@/components/coreshop-image";

/** 数据查询的接口 */
const dispatchKey: string = "{{ModelClassName}}/getPageList";
const span: number = 3;
const rowKey: string = "id";
// 表格刷新
let handleTableRefreshFun: Function;

const state = reactive<{
  selectedRows: Array<any>;
  editModalVisible: boolean;
  formModalTitle: string;
  formSchema: IFormSchema;
  dataDetailVisible: boolean;
  dataDetailConfig: {
    title?: string;
    fields?: Array<IData>;
  };
  deleteConfirmModalVisible: boolean;
  deleteContentTip: string;
  deleteDataUrl: string;
  deleteDataparams: { [key: string]: any };
}>({
  selectedRows: [],
  editModalVisible: false,
  formModalTitle: "编辑",
  formSchema: {},
  dataDetailVisible: false,
  dataDetailConfig: {
    title: "详情",
    fields: [],
  },
  deleteConfirmModalVisible: false,
  deleteContentTip: "确定删除？删除后将无法恢复。",
  deleteDataUrl: "",
  deleteDataparams: {},
});

const store = useStore();
const dataSourceCmp = computed<Array<I{{ModelClassName}}>>(
  () => store.state.{{ModelClassName}}.{{ModelClassName}}.{{ModelClassName}}
);
const totalCmp = computed<number>(
  () => store.state.{{ModelClassName}}.{{ModelClassName}}.count
);

const onTableRefresh = (fun: Function) => {
  handleTableRefreshFun = fun;
};

const onAddData = () => {
  state.editModalVisible = true;
  state.formModalTitle = "新增";
  state.formSchema = formSchema;
};

const onEdit = (data: { [key: string]: any }) => {
  let editFormSchema: IFormSchema = cloneDeep(formSchema);
  state.editModalVisible = true;
  state.formModalTitle = "编辑";
  editFormSchema.filter = { id: data.id };
  state.formSchema = editFormSchema;
};

/** 查看详情 */
const onViewDataDetail = (data: { [key: string]: any }) => {
  dataDetailConfig.fields = buildDataDetail(dataDetailConfig.fields, data);
  state.dataDetailVisible = true;
  state.dataDetailConfig = dataDetailConfig;
};

const onEditModalVisible = (visible: boolean) => {
  state.editModalVisible = visible;
};

const onEditSuccess = () => {
  state.editModalVisible = false;
  handleTableRefreshFun && handleTableRefreshFun();
};

const onCloseDataDetailModal = () => {
  state.dataDetailVisible = false;
};

//#region 删除数据模态交互

const onDelete = (data: { [key: string]: any }) => {
  state.deleteConfirmModalVisible = true;
  state.deleteContentTip = "确定删除？删除后将无法恢复。";
  state.deleteDataUrl = "api/{{ModelClassName}}/DoDelete";
  state.deleteDataparams = { id: data.id };
};

const onCancelDeleteDataModal = () => {
  state.deleteConfirmModalVisible = false;
};

/** 删除数据后回调*/
const onSuccessDeleteData = () => {
   state.deleteConfirmModalVisible = false;
   store.commit("{{ModelClassName}}/deleteDataById", state.deleteDataparams.id);
};

/** 选中数据 */
const onSelectRowChange=(selectedRows:Array<number>)=>{
    state.selectedRows =selectedRows;
}

//#endregion
</script>
<style lang="less" scoped>
</style>
